<template>
	<view class="body">
		<view class="formCss">
			<uni-forms ref="baseForm" labelWidth="200" :modelValue="works" label-position="top">
				<uni-forms-item label="订单编号" required leftIcon="plusempty">
					<uni-easyinput v-model="works.orderId" placeholder="请输入淘宝订单编号(必填)" />
				</uni-forms-item>
				<uni-forms-item label="图片" required leftIcon="camera">
					<input class="upload-style" @click="select" ref="img" type="file" placeholder="上传" /><br>
					<view class="customImgCss">
						<image class="customImgSubCss" ref="simg" mode="scaleToFill" :src="path" />
						<image style="z-index: 1; position: absolute;left: 157px; top: 250px; width: 8%; height: 8%;"
							src="../../static/yz-image/s-head.png" mode=""></image>
						<ksp-cropper mode="free" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024"
							:url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
					</view>
				</uni-forms-item>
				<uni-forms-item label="淘宝账号" required leftIcon="staff">
					<uni-easyinput v-model="works.tbAccount" placeholder="请输入淘宝账号(必填)" />
				</uni-forms-item>
				<uni-forms-item label="手机号" leftIcon="phone">
					<uni-easyinput v-model="works.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="作品名称" leftIcon="compose">
					<uni-easyinput v-model="works.worksName" placeholder="请输入作品名称" />
				</uni-forms-item>
				<uni-forms-item label="材质" leftIcon="map">
					<picker @change="texturePicker" :value="works.texture" :range="works.textures">
						<view class="textureCss">{{$store.state.textures[works.texture]}}</view>

					</picker>
				</uni-forms-item>
				<uni-forms-item label="尺寸" leftIcon="circle">
					<picker @change="sizePicker" :value="works.size" :range="works.sizes">
						<view class="textureCss">{{$store.state.sizes[works.size]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput type="textarea" v-model="works.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="addprodce">提交作品</button>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad: function(data) {
			uni.getStorage({
				key: data.id,
				success: (res) => {
					let {
						createTime,
						id,
						imagePath,
						orderId,
						phone,
						remark,
						size,
						tbAccount,
						texture,
						worksName
					} = res.data
					this.works.id = id
					this.path = imagePath
					this.works.orderId = orderId
					this.works.phone = phone
					this.works.remark = remark
					this.works.size = size
					this.works.tbAccount = tbAccount
					this.works.texture = texture
					this.works.worksName = worksName
				},
			})
		},
		data() {
			return {
				url: "",
				path: "",
				img: "",
				works: {
					id: "",
					orderId: '1',
					phone: '2',
					tbAccount: '3',
					worksName: '4',
					texture: 0,
					textures: ['塑料', '铁质'],
					size: 0,
					sizes: ['18cm', '20cm'],
					remark: '123'
				}
			}
		},
		methods: {
			texturePicker(e) {
				this.works.texture = e.detail.value
			},
			sizePicker(e) {
				this.works.size = e.detail.value
			},
			select() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.url = res.tempFilePaths[0];
						this.img = res.tempFiles[0]
					},
				});
			},
			onok(ev) {
				this.url = "";
				this.path = ev.path;
			},
			oncancel() {
				this.url = "";
			},
			addprodce() {
				if (this.works.id) {
					this.updateWorks()
				} else {
					this.addWorks()
				}
			},
			updateWorks() {
				if (this.img == "") {
					uni.uploadFile({
						url: this.api.customWorks + "update",
						formData: {
							'customWorksJson': JSON.stringify(this.works)
						},
						success: (res) => {
							if (res.data) {
								uni.showToast({
									title: "更新成功"
								})
								let sc = JSON.parse(res.data)
								uni.setStorage({
									key: this.works.id.toString(),
									data: sc.obj
								})
							}
						}
					})
				} else {
					uni.uploadFile({
						url: this.api.customWorks + "update",
						name: "img",
						file: this.img,
						formData: {
							'customWorksJson': JSON.stringify(this.works)
						},
						success: (res) => {
							if (res.data) {
								uni.showToast({
									title: "更新成功"
								})
								let sc = JSON.parse(res.data)
								uni.setStorage({
									key: this.works.id.toString(),
									data: sc.obj
								})
							}
						}
					})
				}
			},
			addWorks() {
				if (this.img == "") {
					uni.uploadFile({
						url: this.api.customWorks,
						formData: {
							'customWorksJson': JSON.stringify(this.works)
						},
						success: (res) => {
							if (res.data) {
								uni.showToast({
									title: "已提交"
								})
								let sc = JSON.parse(res.data)
								uni.setStorage({
									key: sc.obj.id.toString(),
									data: sc.obj
								})
							}
						}
					})
				} else {
					uni.uploadFile({
						url: this.api.customWorks,
						name: "img",
						file: this.img,
						formData: {
							'customWorksJson': JSON.stringify(this.works)
						},
						success: (res) => {
							if (res.data) {
								uni.showToast({
									title: "已提交"
								})
								let sc = JSON.parse(res.data)
								uni.setStorage({
									key: sc.obj.id.toString(),
									data: sc.obj
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	.customImgSubCss {
		margin-left: 5px;
		margin-top: 5px;
		width: 330px;
		height: 330px;
		border-radius: 50%;
	}

	.customImgCss {
		width: 340px;
		height: 340px;
		/* border: 2px #000000 solid; */
		border-radius: 50%;
		background-image: url(../../static/yz-image/yz.jpeg);
		background-size: 360px 360px;
		background-position: -10px -10px;
		z-index: 0;
	}

	.upload-style {
		border: 1px solid #e5e5e5;
		text-align: center;
		height: 34px;
		border-radius: 4px;
		cursor: pointer;
	}

	.body {
		width: 100%;
		height: 100%;
	}

	.formCss {
		padding: 20px;
	}

	.textureCss {
		width: auto;
		height: 40px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
	}
</style>
